<template>
<div>
  <div :id="chartsId" :style="{width: '900px', height: '500px'}" class="my-chart"></div>
</div>
</template>

<style lang="scss" scoped>
div{
    margin: 30px 0;
}
</style>

<script>
export default {
  props: ['chartsId','keyName', 'data', 'val', 'name'],
  data(){
      return {}
  },
  mounted(){
      this.desc();
  },
  watch: {
		data(){
			let data = this.data;
			console.log('散点: ', data);
			let val = this.val;
			let name = this.name;
			console.log('散点: ', data);
			//处理数据
			// let benpin = 'discounts_benpin_' + val[0];
			// let cityArr = [];
			// for(let o in data[benpin]){//获取到城市list
			// 	cityArr.push(o.substring(5));
			// }
			//获取时间函数
			function getdate(){
					let list = [];
					let year = new Date().getFullYear();//当前年
					let month = new Date().getMonth()+1;//当前月
					month = month + 12; 
					for(let i = 1; i <= 3; i++){
						if((month-i)/12 == 1) --year;
						let temMonth = (month-i) % 12;
						if(temMonth == 0) temMonth = 12;
						let item = year + '-' + temMonth;
						list.unshift(item);
					}
					return list;
			}
			let allDataArr = [];//全部数据
			for(let q = 0; q < val.length; q++){
				let firstName = '';
				if(q == 0)
					firstName = 'discounts_benpin_' + val[0];
				else 
					firstName = 'discounts_jingpin_' + val[q];
				//获取单个车款城市top5
				let cityArr = data[firstName].citys;
				console.log('cityArr: ', cityArr);
				// if(cityArr.length < 3) {
				// 	allDataArr.push([]);//没有数据就放入空
				// 	continue;
				// };
				let dataArr = [];
				for(let i  = 0; i <  cityArr.length; i++){
					let cityName = 'city_'+ cityArr[i];//城市数组
					let discountName = 'city_avg_discount_DM_' + cityArr[i];
					let salesName = 'city_sales_DM_' + cityArr[i];
					let discount = data[firstName][cityName][discountName];//优惠数组
					let sales = data[firstName][cityName][salesName];//销量数组
					
					let dateArr = getdate();//时间数组
					for(let j = 0; j < 3; j++){//按照x轴，y轴，城市，时间，车型封装数据
						dataArr.push([discount[j], sales[j], cityArr[i], dateArr[j], name[q]])
					}
				}
				allDataArr.push(dataArr);
			}
			console.log('allDataArr: ', allDataArr);
			let myChart5 = this.$echarts.init(document.getElementById(this.chartsId));
			myChart5.setOption({
				series: function (){
					let arr = [];
					for(let i = 0; i < val.length; i++){
						let obj = {};
						obj.name = name[i];
						obj.type = 'scatter',
						obj.symbolSize = 20,
						obj.data = allDataArr[i];
						console.log('obj.data: ', obj.data);
						arr.push(obj);
					}
					return arr;
				}()
			})

		}
	},
  methods: {
      desc(){
          let myChart5 = this.$echarts.init(document.getElementById(this.chartsId));
          myChart5.setOption({
            title: {
                text: '销量-优惠变化值散点图',
                left: 'left',
                top: 'top'
            },
            color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
            tooltip:{
                trigger: 'item',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
									let data = params.data;
									let str = `${data[4]}'<br/>'${data[3]}'<br/>'${data[2]}'<br/>''城市平均月变化：'${data[0]}'<br/>''城市销量月变化：'${data[1]}`
									return str;
                }
            },
            xAxis: {},
            yAxis: {},
            series: [
                {
                name: '本田',
                type: 'scatter',
                symbolSize: 20,
                data: [
                    [-10.0, 8.04, '北京'],
                    [8.0, 6.95, '北京'],
                    [13.0, 7.58, '北京'],
                    [9.0, -8.81, '北京'],
                    [11.0, 8.33, '北京'],
                    [-14.0, 9.96, '北京'],
                    [6.0, 7.24, '北京'],
                    [-4.0, -4.26, '北京'],
                    [12.0, -10.84, '北京'],
                    [-7.0, 4.82, '北京'],
                    [5.0, 5.6, '北京']
                ]
                },
                {
                name: '丰田',
                type: 'scatter',
                symbolSize: 20,
                data: [
                    [-8.0, 8.04, '上海'],
                    [8.0, -6.95, '上海'],
                    [13.0, -7.58, '上海'],
                    [-9.0, -8.81, '上海'],
                    [11.0, 8.33, '上海'],
                    [-14.0, 9.96, '上海'],
                    [6.0, 7.24, '上海'],
                    [4.0, -4.26, '上海'],
                    [-12.0, -10.84, '上海'],
                    [7.0, 4.82, '上海'],
                    [5.0, -5.68, '上海']
                ]
                },
            ]
        })

      }
  }
}
</script>
